<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/mainPage.css">
    <link rel="stylesheet" href="/css/nav-top.css">
    <link rel="stylesheet" href="/css/order.css">
    <link rel="stylesheet" href="/css/Product.css">
    <link rel="shortcut icon" href="https://pets-1046189-pic45.websiteonline.cn/upload/favicon-20190621040405750.ico" type="image/x-icon"/>
    <script src="https://kit.fontawesome.com/59c20db7cc.js" crossorigin="anonymous"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            background-color: #eeeeee;
        }

        nav {
            width: 96%;
            height: 500px; /* only for demonstration, should be removed */
            padding: 20px;
            margin: 0 auto;
        }
    </style>
    <title>订单</title>
</head>
<body>
<div class="nav-top-1">
    <div class="nav_logo">
        <span  >JPetStore</span>
    </div>
    <div class="nav_search">
        <div id="search">
            <input type="text" class="search_input" id="keyword">
        </div>
        <div id="productAutoComplete">
            <ul id="productAutoList"></ul>
        </div>
    </div>
    <ul class="nav_link">
        <li class="nav-top-item">
            <a href="#" class="link"  >设置</a>
        </li>
        <li class="nav-top-item">
            <a href="#" class="link"  >订单</a>
        </li>
        <li class="nav-top-item">
            <a href="02.html" class="link"><span style="color:#215496;font-weight:bold">商品</span></a>
        </li>
        <li class="nav-top-item">
            <a href="01.html" class="link"  >首页</a>
        </li>
    </ul>
</div>
<section>
    <nav class="">
        <div class="page-wrap w">
            <div class="panel">
                <div class="panel-title">订单信息</div>
                <div class="panel-body">
                    <table class="order-table" id="orderList">
                        <tr>
                            <th class="cell-item">Order ID</th>
                            <th class="cell-product">Product ID</th>
                            <th class="cell-quantity">Quantity</th>
                            <th class="cell-price">List Price</th>
                            <th class="cell-total">Total Cast</th>
                            <th class="cell-setting"> </th>
                        </tr>
                        <tr th:each="order : ${orderList}" th:id="${order.orderId}" id="select-order">
                            <td class="userId" th:text="${order.userId}" hidden></td>
                            <td th:text="${order.orderId}" class="cell-item"></td>
                            <td th:text="${order.orderId}" class="cell-product"></td>
                            <td th:text="${order.quantity}" class="cell-quantity"></td>
                            <td th:text="${order.listPrice}" class="cell-price"></td>
                            <td th:text="${order.totalPrice}" class="cell-total"></td>
                            <td class="cell-setting">
                                <div class="submit-content">
                                    <span class="btn order-submit">
                                        <div class="context">删除订单</div>
                                    </span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </nav>
</section>
<div id="whole" style="display: none" class="whole"></div>
<div id="floatingWindow" style="display: none">
<!--    <table class="order-table-info">-->
<!--        <tr>-->
<!--            <th class="cell-img">&nbsp;</th>-->
<!--            <th class="cell-item">Item ID</th>-->
<!--            <th class="cell-product">Product ID</th>-->
<!--            <th class="cell-description">Description</th>-->
<!--            <th class="cell-inStock">In Stock？</th>-->
<!--            <th class="cell-quantity">Quantity</th>-->
<!--            <th class="cell-price">List Price</th>-->
<!--            <th class="cell-total">Total Cast</th>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td class="cell-img">-->
<!--                <a href="#">-->
<!--                    <img src="https://img13.360buyimg.com/n1/jfs/t1/79307/18/12581/109668/5d9efaefE2b6ec198/bf20f700d562c54d.jpg" alt="" class="product-img">-->
<!--                </a>-->
<!--            </td>-->
<!--            <td class="cell-item">-->
<!--                <a href="#" class="link_cancel">EST-4</a>-->
<!--            </td>-->
<!--            <td class="cell-product">-->
<!--                <input type="text" value="FI-FW-01">-->
<!--            </td>-->
<!--            <td class="cell-description">-->
<!--                <input type="text" value="Spotted Koi">-->
<!--            </td>-->
<!--            <td class="cell-inStock">-->
<!--                <input type="text" value="ture">-->
<!--            </td>-->
<!--            <td class="cell-quantity">-->
<!--                <input type="text" value="2">-->
<!--            </td>-->
<!--            <td class="cell-price">-->
<!--                <input type="text" value="$18.50">-->
<!--            </td>-->
<!--            <td class="cell-total">-->
<!--                <input type="text" value="$37.00">-->
<!--            </td>-->
<!--        </tr>-->
<!--    </table>-->
</div>
<script src="/js/window.js"></script>
<script>
    $('#orderList').on('click','.submit-content',function () {
        let orderSelected = $(this).parent('.cell-setting').siblings('.cell-item'),
                 oneOrder = $(this).parent('.cell-setting').parent(),
                  orderId = orderSelected.text(),
                    order = {
            "userid"  :   $('#' + orderId + ' td[class="userId"]').text(),
            "orderId" :   orderId
        }
        console.log(orderId);
        console.log(order.userid);
        $.ajax({
            type    : 'DELETE',
            url     : 'orders/delete',
            data    : order,
            success : function (data){
                console.log(data);
                oneOrder.remove();
            },
            error   : function (errorMsg) {
                console.log(errorMsg)
            }
        })
    })
</script>
</body>
</html>